Understanding React Native Native Architecture Fundamentals

Course: React Native Training

Topic: Understanding React Native Native Architecture Fundamentals

Course Link: React Native Training at JustAcademy

Demo Link: Register for a Course Demo

Website: JustAcademy Official Website

1. Introduction to React Native Native Architecture

React Native is an open-source framework for building mobile applications using JavaScript or TypeScript and React. It allows developers to create applications for Android and iOS while sharing much of their application logic and UI code.

Although developers write much of a React Native application in JavaScript or TypeScript, the application runs within a native mobile environment. React Native connects the JavaScript runtime with platform capabilities such as native views, device APIs, navigation, notifications, storage, and other system features.

React Native architecture describes how the JavaScript layer, React rendering system, native platform code, and communication mechanisms work together to display the user interface and access device capabilities.

Understanding this architecture helps developers troubleshoot performance problems, understand native dependencies, choose compatible libraries, and build applications that interact effectively with Android and iOS.

Modern React Native uses the New Architecture, which includes technologies such as JavaScript Interface (JSI), Fabric, TurboModules, and Codegen. The New Architecture became enabled by default in newly created projects starting with React Native 0.76, although existing projects and their configurations may differ. Read the official New Architecture overview.

1.1 Learning Objectives

• Understand the basic architecture of a React Native application.
• Identify the responsibilities of JavaScript and native platform code.
• Understand the legacy architecture and its bridge-based communication model.
• Learn the purpose of JSI, Fabric, TurboModules, and Codegen.
• Understand how React elements become native views.
• Explore the render, commit, and mount phases.
• Learn how native modules and native components work.
• Understand threading, asynchronous work, and UI responsiveness.
• Identify common architecture-related performance problems.
• Learn the fundamentals of debugging and maintaining native dependencies.

2. What Is Native Architecture?

Native architecture refers to the underlying systems that allow a React Native application to execute JavaScript, render UI elements, communicate with platform code, and use native device functionality.

For example, when a developer writes a View component in React Native, the application does not simply display an HTML element inside a browser. React Native coordinates with its renderer and the platform implementation to display a corresponding native UI view.

2.1 Main Parts of React Native Architecture

2.2 Why Learn the Architecture?

• To understand how JavaScript components become native UI elements.
• To diagnose slow rendering and unresponsive interactions.
• To select native libraries that support the project's React Native version.
• To understand how device features are exposed to JavaScript.
• To troubleshoot native build errors.
• To understand the responsibilities of JavaScript, C++, Kotlin, Java, and Swift code.
• To prepare for advanced React Native development and native module integration.

3. High-Level Architecture of a React Native Application

A typical React Native application combines shared application logic with platform-specific implementations. Developers usually write screens and business logic in JavaScript or TypeScript, while native platform code provides access to operating-system functionality and native UI implementations.

3.1 Simplified Architecture Diagram

+---------------------------------------+
|       React Native Application        |
|                                       |
|  React Components and Application     |
|  Logic (JavaScript / TypeScript)      |
+-------------------+-------------------+
                    |
                    v
+---------------------------------------+
|        JavaScript Runtime             |
|        (for example, Hermes)          |
+-------------------+-------------------+
                    |
                    v
+---------------------------------------+
|     React Native Core Architecture    |
|                                       |
|  JSI | Fabric | TurboModules | Codegen|
+-------------------+-------------------+
                    |
                    v
+---------------------------------------+
|       Native Platform Layer           |
|                                       |
|  Android: Kotlin / Java / C++         |
|  iOS: Swift / Objective-C / C++        |
+-------------------+-------------------+
                    |
                    v
+---------------------------------------+
|       Operating System and Device     |
|                                       |
|  Views, Storage, Camera, Sensors,      |
|  Notifications, Permissions, etc.     |
+---------------------------------------+

This diagram is a conceptual overview. The actual execution path varies depending on the feature, React Native version, native module implementation, and platform.

3.2 Example of a Button Interaction

Suppose a user presses a button that updates a counter. The general flow is:

1. The user taps a native button or touchable UI element.
2. The platform delivers the interaction event to React Native.
3. The relevant JavaScript event handler executes.
4. The handler updates React state.
5. React determines the UI changes required by the new state.
6. The renderer calculates and applies the necessary native view updates.
7. The user sees the updated counter.

Not every state update requires rebuilding the entire screen. React Native and React optimize updates by processing the changes needed for the current UI.

4. Understanding the JavaScript Layer

The JavaScript layer contains much of the code developers write when building a React Native application. It includes React components, application state, business rules, event handlers, data transformations, and calls to native capabilities.

4.1 Responsibilities of the JavaScript Layer

• Defining reusable React components.
• Handling user interactions.
• Managing state and props.
• Performing client-side validation.
• Calling APIs and processing responses.
• Coordinating application navigation.
• Invoking supported native module APIs.
• Determining what the UI should display.

4.2 Example React Native Component

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

export default function CounterScreen() {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button
        title="Increase"
        onPress={() => setCount(current => current + 1)}
      />
    </View>
  );
}

In this example, JavaScript controls the counter's logic and the React component describes the desired UI. React Native's rendering infrastructure handles displaying the UI through native platform views.

4.3 JavaScript Does Not Mean WebView

React Native is different from a traditional hybrid application that places the entire application inside a WebView. React Native's standard UI components are rendered through native platform implementations. JavaScript supplies the application logic and React UI description, while the renderer coordinates the native presentation.

5. Understanding the Native Platform Layer

The native platform layer connects the application to Android and iOS capabilities. Each operating system has its own programming languages, UI systems, APIs, build tools, and lifecycle behavior.

5.1 Android Native Development

Android native code may use Kotlin, Java, and C++. Android projects commonly use Gradle for builds and Android Studio for development and debugging.

Native Android code may be required for specialized integrations, platform APIs, custom views, or libraries that depend on Android-specific functionality.

5.2 iOS Native Development

iOS native code may use Swift, Objective-C, and C++. iOS projects use Xcode and Apple development tools, while CocoaPods or other supported dependency-management arrangements may be used for native libraries.

Native iOS code can provide access to Apple platform APIs, custom UI components, and functionality that is not exposed directly by the React Native core.

5.3 Shared and Platform-Specific Code

6. Legacy Architecture Fundamentals

Before the New Architecture, React Native primarily relied on a bridge-based communication model between JavaScript and native code. This architecture supported cross-platform development but had limitations when applications needed frequent, high-volume, or time-sensitive communication between the JavaScript and native layers.

6.1 The Legacy Bridge

The bridge acted as a communication mechanism between JavaScript and native code. Calls and data were generally queued and serialized so that the two environments could exchange messages.

For example, a JavaScript component could request a native operation, and the native side would process the request and communicate results back through the bridge's supported mechanisms.

6.2 Simplified Legacy Communication Flow

JavaScript Application
        |
        v
Serialize Call or Data
        |
        v
Asynchronous Bridge
        |
        v
Native Module or Renderer
        |
        v
Platform Operation
        |
        v
Response or Event
        |
        v
JavaScript Application

6.3 Limitations of the Legacy Architecture

• Serialization could add overhead when exchanging large amounts of data.
• Communication often depended on asynchronous message passing.
• Some interactions were difficult to coordinate synchronously.
• Legacy native module APIs could require additional setup and boilerplate.
• High-frequency communication could become inefficient for certain workloads.
• Rendering integration and scheduling had limitations that affected some advanced UI experiences.

The legacy architecture was still capable of supporting production applications. The New Architecture was developed to address fundamental limitations and enable more modern rendering and native integration capabilities.

7. Introduction to the New Architecture

The React Native New Architecture modernizes the way JavaScript interacts with native code, how UI is rendered, and how work is scheduled. It introduces a collection of technologies that work together rather than a single replacement component.

The major concepts include:

• JSI: JavaScript Interface for communication with native C++ objects.
• Fabric: The modern React Native renderer.
• TurboModules: The modern native module system.
• Codegen: Generation of native interface code from typed specifications.
• Concurrent rendering support: Infrastructure that supports modern React rendering capabilities.

7.1 Goals of the New Architecture

• Reduce unnecessary serialization between JavaScript and native code.
• Improve native integration and rendering flexibility.
• Support more advanced React rendering capabilities.
• Improve type safety for supported native interfaces.
• Provide more consistent rendering behavior across platforms.
• Support more efficient initialization of native modules and components.

7.2 Does the New Architecture Automatically Make Every App Faster?

No. The New Architecture enables more efficient communication and modern rendering capabilities, but actual performance depends on the application's design and workload.

An application may still be slow because of expensive JavaScript calculations, excessive renders, large lists, inefficient images, heavy native operations, or network delays. Developers should measure performance and address the actual bottleneck rather than assume that enabling the New Architecture will fix every issue.

8. Understanding JSI (JavaScript Interface)

JSI stands for JavaScript Interface. It is a C++ interface that enables communication between a JavaScript runtime and C++ objects. It provides a foundation for more direct interaction between JavaScript and native functionality.

8.1 Why JSI Matters

In a bridge-based architecture, communication frequently required data to be serialized and sent through an asynchronous queue. JSI allows native integrations to expose and interact with objects and functions without relying on that same bridge-based serialization model.

This is especially useful when working with certain high-performance native libraries, image processing, camera functionality, databases, and other operations that benefit from efficient native integration.

8.2 Simplified JSI Concept

JavaScript Runtime
        |
        v
JavaScript Interface (JSI)
        |
        v
C++ Object or Host Function
        |
        v
Native Implementation

This diagram illustrates the conceptual relationship. A specific native module may use additional generated interfaces, platform-specific code, and runtime integration.

8.3 Benefits of JSI

• Enables direct interaction with C++ objects through supported runtime interfaces.
• Reduces the need for bridge-style serialization in compatible integrations.
• Supports native libraries that work with complex objects and high-volume data.
• Provides an important foundation for Fabric and TurboModules.
• Helps make certain synchronous native interactions possible where appropriate.

8.4 JSI Does Not Mean Every Operation Is Synchronous

JSI provides mechanisms for interaction between JavaScript and native code, but it does not mean that all native work should run synchronously. Long-running operations can still block the JavaScript runtime if implemented poorly.

Developers must choose suitable execution patterns for CPU-intensive work, file operations, networking, and other tasks. Synchronous calls should be used carefully because blocking the JavaScript thread can make the interface feel unresponsive.

9. Understanding Fabric Renderer

Fabric is React Native's modern rendering system. It coordinates how React UI descriptions are transformed into a representation that can be laid out and mounted as native views.

Fabric improves interoperability between React Native and host platform UI systems and supports modern React rendering capabilities. It also uses shared C++ infrastructure to improve consistency across supported platforms.

9.1 Responsibilities of Fabric

• Representing the React Native UI tree.
• Coordinating layout calculations.
• Preparing updates to native views.
• Supporting priority-aware rendering work.
• Improving integration between React Native and host platform views.
• Supporting modern React capabilities, including concurrent rendering features.

9.2 Fabric and Native UI Components

Consider the following React Native UI:

import React from 'react';
import { View, Text, Pressable } from 'react-native';

export default function WelcomeCard() {
  return (
    <View>
      <Text>Welcome to React Native</Text>
      <Pressable onPress={() => console.log('Pressed')}>
        <Text>Continue</Text>
      </Pressable>
    </View>
  );
}

React creates a description of the UI. The renderer works with this description and the layout system to prepare the required native view updates. The platform then displays the resulting UI.

9.3 Benefits of Fabric

• More consistent rendering infrastructure across platforms.
• Improved interoperability with host platform views.
• Support for modern React rendering features.
• More flexible coordination of layout and UI updates.
• Improved foundation for native components.
• Opportunities for performance improvements when the application benefits from the new rendering model.

Official reference: Fabric Renderer Documentation.

10. Understanding the Render, Commit, and Mount Phases

React Native's rendering process can be understood through three main phases: render, commit, and mount. These phases explain how application logic becomes a visible UI update.

10.1 Render Phase

During the render phase, React executes component logic and creates a React element tree. React Native's renderer uses this information to build or update its internal representation of the UI.

For example, when a counter changes from zero to one, React determines the updated output of the counter component.

10.2 Commit Phase

During the commit phase, the completed tree is promoted for the next update and the system schedules the required layout calculations. The exact work performed depends on the update and rendering scenario.

10.3 Mount Phase

During the mount phase, the renderer applies the required changes to the host platform UI. This can include creating, updating, or removing native views and applying calculated layout information.

10.4 Simplified Render Pipeline

User Action or State Update
          |
          v
     Render Phase
          |
          v
    Commit Phase
          |
          v
     Mount Phase
          |
          v
   Updated Native UI

10.5 Example

Suppose a user presses a button that changes a message from “Welcome” to “Hello”.

1. The button handler updates state.
2. React executes the affected component logic.
3. The renderer prepares the updated UI representation.
4. The update is committed.
5. The required native view changes are mounted.
6. The user sees “Hello”.

Understanding these phases is useful when investigating rendering delays, unnecessary updates, and complex interactions between React Native and native UI components.

Official reference: Render, Commit, and Mount Documentation.

11. Understanding TurboModules

TurboModules are part of React Native's New Architecture and provide a modern system for exposing native functionality to JavaScript. They build on the new native module infrastructure and support typed interfaces and improved integration.

11.1 What Is a Native Module?

A native module exposes functionality implemented outside ordinary JavaScript application code. This allows JavaScript to use native platform APIs or custom native functionality through a defined interface.

Examples include:

• Accessing device information.
• Integrating a platform-specific service.
• Exposing a custom native calculation.
• Interacting with a native SDK.
• Providing access to a device capability not exposed directly by React Native core.

11.2 TurboModules vs. Legacy Native Modules

11.3 Conceptual TurboModule Flow

JavaScript Application
        |
        v
Typed Module Specification
        |
        v
Codegen-Generated Interface
        |
        v
TurboModule Integration
        |
        v
Native Implementation
        |
        v
Platform API or Result

11.4 When Are TurboModules Useful?

TurboModules are useful when developers need to expose custom native capabilities, integrate native SDKs, or maintain libraries that use the New Architecture. Most application developers do not need to create a TurboModule for every feature; existing React Native APIs and compatible community libraries often provide the functionality they need.

12. Understanding Codegen

Codegen is a system that generates native interface code from typed JavaScript specifications for supported native modules and native components. It reduces the amount of manual interface code and helps ensure that the JavaScript specification and native implementation agree on the expected API.

12.1 Why Codegen Is Important

• Generates native scaffolding for supported module and component specifications.
• Helps enforce consistency between JavaScript types and native interfaces.
• Reduces repetitive native integration code.
• Supports the TurboModules and Fabric component systems.
• Helps detect certain interface mismatches during development or build time.

12.2 Simplified Codegen Workflow

1. Define the module or component specification using a supported typed format.
2. Configure the project to recognize the specification.
3. Run the appropriate Codegen process through the project tooling.
4. Review or build against the generated native interfaces.
5. Implement the required native behavior.
6. Integrate the module or component into the application.

12.3 Conceptual TypeScript Specification

// Illustrative specification shape only.
// Exact imports, naming conventions, and configuration
// depend on the React Native version.

export interface DeviceInfoSpec {
  getDeviceName(): Promise<string>;
}

This snippet demonstrates the idea of a typed interface. It is not a complete, directly installable TurboModule. Actual specifications must follow the conventions supported by the React Native version in use.

13. Native Modules vs. Native Components

Native modules and native components serve different purposes. A native module exposes functionality or operations, while a native component represents a UI element that can be rendered and displayed.

13.1 Example Scenarios

Native module scenario: A JavaScript screen requests a device capability through a native module and displays the returned result.

Native component scenario: A JavaScript screen renders a custom camera preview implemented using platform-native UI and camera APIs.

14. Understanding the JavaScript Runtime and Hermes

React Native executes JavaScript using a JavaScript engine. Hermes is a JavaScript engine optimized for React Native use and is commonly used in modern projects.

14.1 What Does a JavaScript Engine Do?

• Executes JavaScript application code.
• Evaluates expressions and function calls.
• Manages JavaScript values and objects.
• Runs event handlers and application logic.
• Works with the React Native runtime and native integration infrastructure.

14.2 Why Hermes Is Used

Hermes is designed with mobile application requirements in mind. Depending on the application and build configuration, it can provide benefits related to startup behavior, memory use, and JavaScript execution.

Actual performance depends on the codebase, application size, build mode, device hardware, and workload. Benchmarking is more reliable than assuming that one engine or configuration will always be faster for every application.

14.3 Hermes Is Not the Renderer

Hermes executes JavaScript. Fabric handles React Native rendering. They are separate parts of the architecture that work together but have different responsibilities.

15. Understanding Threads and Scheduling

React Native applications perform different kinds of work, including JavaScript execution, native UI operations, layout calculations, and background tasks. Understanding the broad threading model helps developers diagnose frozen interfaces and delayed interactions.

15.1 JavaScript Thread

The JavaScript runtime executes application JavaScript. Expensive synchronous calculations or large amounts of JavaScript work can delay event handling and updates that depend on JavaScript execution.

15.2 Main or UI Thread

The platform's UI thread is responsible for important native UI operations. The exact threading details vary by platform and implementation, but blocking UI-critical work can make the application appear frozen or cause missed frames.

15.3 Background Work

Networking, native processing, and other operations may use different execution mechanisms. Developers should use appropriate APIs and libraries rather than performing expensive synchronous work on a thread that must remain responsive.

15.4 Common Performance Problems

• Large loops or complex calculations on the JavaScript thread.
• Rendering large lists without suitable virtualization.
• Excessive component re-renders.
• Expensive image processing or transformations.
• Too many cross-layer calls for high-frequency events.
• Long-running synchronous native functions.
• Heavy work performed during screen transitions.

15.5 Performance Improvement Strategies

• Profile before making architecture-level changes.
• Optimize expensive JavaScript calculations.
• Use virtualized lists for large collections.
• Avoid unnecessary state updates and re-renders.
• Use efficient image sizes and formats.
• Choose libraries that are compatible with the application's architecture.
• Move suitable expensive work to native or background processing when appropriate.
• Keep UI-thread and JavaScript-thread work short enough to preserve responsiveness.

16. Native UI Rendering and Layout

React Native components such as View, Text, and Image represent UI elements using React Native's component system. The renderer and platform implementations coordinate the creation and updating of the corresponding native views.

16.1 What Happens During Layout?

1. React components describe the desired UI structure.
2. The renderer builds or updates its internal representation.
3. Layout calculations determine positions and dimensions.
4. The renderer prepares the necessary native view updates.
5. The platform displays the updated interface.

16.2 Flexbox and Layout

React Native uses a layout system based largely on Flexbox concepts. Properties such as flexDirection, justifyContent, alignItems, and flex determine how children are positioned within containers.

import React from 'react';
import { View, Text } from 'react-native';

export default function ProfileCard() {
  return (
    <View
      style={{
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: 16
      }}
    >
      <Text>User Profile</Text>
      <Text>Active</Text>
    </View>
  );
}

The JavaScript style object describes layout intent. The renderer and platform implementation handle the actual layout and presentation.

16.3 View Flattening

View flattening is an optimization that can eliminate certain unnecessary layout-only view nodes when doing so preserves the expected behavior. Reducing unnecessary native view structures can help rendering efficiency.

Developers should focus on creating clear, maintainable UI code and use profiling to determine whether view hierarchy complexity is an actual bottleneck.

17. Communicating with Native Device Features

React Native applications often use features provided by the operating system. Depending on the capability, developers may use a built-in React Native API, a compatible community library, or custom native integration.

17.1 Examples of Native Capabilities

• Camera and media capture.
• Location services.
• Push notifications.
• Biometric authentication.
• File and storage access.
• Bluetooth and connected-device features.
• Platform-specific system settings.
• Custom hardware or vendor SDK integration.

17.2 Typical Integration Workflow

1. Identify the native capability required by the application.
2. Check whether React Native core already provides a suitable API.
3. Find a maintained library that supports the target platforms and architecture.
4. Install the dependency and complete any required native setup.
5. Configure platform permissions where necessary.
6. Implement JavaScript or TypeScript integration.
7. Test on Android and iOS devices or simulators as appropriate.
8. Handle permission denial, missing capabilities, and errors.

17.3 Example: Using a Native Capability Through a Library

// Conceptual example only.
// Replace the function with a real API from a compatible library.

async function readDeviceCapability() {
  try {
    const result = await DeviceCapability.getValue();
    return result;
  } catch (error) {
    console.error('Unable to read device capability', error);
    throw error;
  }
}

DeviceCapability is a placeholder, not a built-in React Native API. A real implementation must use an installed library or a custom native module.

18. Platform-Specific Code and Compatibility

Although React Native encourages code reuse, some functionality differs between Android and iOS. Platform-specific logic may be needed for system permissions, UI conventions, native APIs, and third-party integrations.

18.1 Using Platform.OS

import { Platform, Text } from 'react-native';

export default function PlatformMessage() {
  const message =
    Platform.OS === 'ios'
      ? 'Running on iOS'
      : 'Running on Android';

  return <Text>{message}</Text>;
}

18.2 Platform-Specific Files

React Native supports platform-specific file extensions such as .ios.js and .android.js in supported resolution setups. These can be useful when an implementation genuinely needs to differ between platforms.

18.3 Compatibility Checklist

• Verify that the library supports the React Native version in use.
• Check whether it supports the New Architecture.
• Review Android and iOS requirements separately.
• Verify minimum operating-system versions.
• Review permission and privacy requirements.
• Confirm that native dependencies build correctly.
• Test on both platforms instead of assuming identical behavior.

19. Enabling and Identifying the New Architecture

New React Native projects using version 0.76 and later generally enable the New Architecture by default. However, older projects, migrated projects, and custom configurations may behave differently.

19.1 Android Configuration

In projects that use the standard React Native configuration, the New Architecture setting has historically been controlled through android/gradle.properties.

# Example configuration for projects that support this setting
newArchEnabled=true

The exact configuration should be checked against the React Native version and Android build template used by the project.

19.2 iOS Configuration

iOS projects may use CocoaPods and React Native build settings to configure native dependencies. The required configuration varies by React Native version and project template, so follow the corresponding official migration or setup guide.

19.3 Important Considerations

• Do not change architecture settings blindly in a production project.
• Check third-party library compatibility before changing configuration.
• Commit and review native configuration changes carefully.
• Reinstall or rebuild native dependencies when required by the setup guide.
• Test both development and release builds.
• Use the official documentation for the exact version of React Native being used.

Official reference: React Native New Architecture Overview.

20. Common Native Architecture Errors

Native architecture problems may appear as build failures, missing native modules, application crashes, UI rendering issues, or runtime errors. Correct diagnosis requires checking JavaScript code, native configuration, library compatibility, and device logs.

20.1 A Systematic Debugging Process

1. Reproduce the issue consistently.
2. Identify whether it occurs in JavaScript, native code, rendering, or build setup.
3. Read the complete error message and stack trace.
4. Check the React Native and library versions.
5. Review native build logs and device logs.
6. Verify platform-specific configuration.
7. Create a minimal reproduction when possible.
8. Apply one change at a time and retest.

21. Native Architecture and Application Performance

Architecture affects how UI updates, native calls, and JavaScript execution are coordinated. However, performance is influenced by many factors, and not every performance problem originates in the architecture itself.

21.1 Common Performance Bottlenecks

• Too many unnecessary React renders.
• Large amounts of synchronous JavaScript work.
• Expensive calculations during rendering.
• Large or poorly optimized images.
• Long lists rendered without appropriate virtualization.
• Excessive native communication in high-frequency workflows.
• Heavy native operations executed on UI-critical threads.
• Slow network requests or backend responses.

21.2 How to Improve Performance

1. Measure performance using suitable profiling tools.
2. Determine whether the problem is JavaScript, rendering, native code, or network-related.
3. Reduce unnecessary state changes and re-renders.
4. Optimize expensive calculations and data processing.
5. Use appropriate list virtualization and image optimization.
6. Choose libraries that fit the architecture and platform requirements.
7. Test in release builds as well as development builds.
8. Compare performance on representative devices.

22. Security and Stability Considerations

Native integration introduces access to device features and platform APIs. Developers must handle permissions, data, native dependencies, and errors responsibly.

22.1 Security Best Practices

• Request only the permissions required by the feature.
• Do not store sensitive secrets directly in JavaScript source code.
• Use suitable secure-storage mechanisms for sensitive local data.
• Validate data received from native modules and external services.
• Keep native libraries and build dependencies updated.
• Handle permission denial and unsupported devices gracefully.
• Do not expose unnecessary native functionality to the JavaScript layer.

22.2 Stability Best Practices

• Use maintained libraries with clear compatibility information.
• Test native integrations on Android and iOS.
• Handle rejected promises and native errors.
• Verify application lifecycle behavior.
• Keep platform-specific implementations consistent where possible.
• Run integration and end-to-end tests for critical workflows.

23. Practical Project: Explore React Native Architecture

Create a small React Native application that demonstrates the relationship between JavaScript components, React state, native rendering, and platform-specific behavior.

23.1 Project Requirements

• Create a Home screen with a counter.
• Use a button to update the counter state.
• Display platform information.
• Add a reusable card component.
• Integrate one compatible community library that uses a native capability.
• Handle loading, success, and error states for the native capability.
• Test the application on Android and iOS where available.
• Document the role of JavaScript, the renderer, and native code in the project.

23.2 Example Home Screen

import React, { useState } from 'react';
import {
  View,
  Text,
  Button,
  Platform,
  StyleSheet
} from 'react-native';

export default function ArchitectureDemo() {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.heading}>
        React Native Architecture Demo
      </Text>

      <Text>Platform: {Platform.OS}</Text>

      <Text>Counter: {count}</Text>

      <Button
        title="Increase Counter"
        onPress={() => setCount(value => value + 1)}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20
  },
  heading: {
    fontSize: 20,
    marginBottom: 16
  }
});

23.3 What to Observe

1. The JavaScript component describes the UI.
2. The React state determines the current counter value.
3. The button interaction updates state.
4. React identifies the required UI changes.
5. The renderer applies the update through the platform UI system.
6. The platform-specific value changes depending on the device.

23.4 Suggested Project Deliverables

• Working React Native application.
• Reusable UI components.
• Platform-specific display or behavior.
• One compatible native library integration.
• A short architecture diagram.
• A debugging report describing one issue and its resolution.

24. Practical Exercises

1. Draw a diagram showing the JavaScript layer, JSI, renderer, native modules, and platform layer.
2. Explain how a button press results in a native UI update.
3. Compare the legacy bridge-based architecture with the New Architecture.
4. Describe the purpose of JSI and give an example of where it is useful.
5. Explain the difference between Fabric and TurboModules.
6. Describe the render, commit, and mount phases.
7. Create a small component that uses state and observe how the UI changes.
8. Identify a community library and check whether it supports the project's React Native version and architecture.
9. Investigate a simulated native build error and write down the debugging steps.
10. Profile a sample application and identify one performance bottleneck.
11. Explain the difference between a native module and a native component.
12. Describe the role of Codegen in creating supported native interfaces.

25. Interview Questions and Answers

Q1. What is React Native architecture?

React Native architecture is the collection of systems that coordinate JavaScript execution, React rendering, native integration, and platform UI updates in a mobile application.

Q2. What is the difference between React Native and a WebView-based application?

React Native uses React components that are rendered through native platform implementations. A traditional WebView-based application typically displays its main interface using web technologies inside a browser view.

Q3. What was the bridge in the legacy architecture?

The bridge was a communication mechanism used to exchange calls and data between JavaScript and native code, often using asynchronous message queues and serialization.

Q4. What is JSI?

JSI is a C++ interface that allows a JavaScript runtime to interact with C++ objects and functions. It is a foundational technology for the New Architecture's native integration.

Q5. What is Fabric?

Fabric is React Native's modern rendering system. It coordinates the transformation of React UI descriptions into native view updates and supports modern rendering capabilities.

Q6. What are TurboModules?

TurboModules are part of the New Architecture's native module system. They expose native functionality through modern interfaces and support typed specifications and generated native scaffolding.

Q7. What is Codegen?

Codegen generates native interface code from supported typed JavaScript specifications for native modules and components, helping maintain consistency between JavaScript declarations and native implementations.

Q8. What is the difference between a native module and a native component?

A native module exposes functionality or operations, while a native component provides a UI element that can be rendered as part of the application interface.

Q9. What is Hermes?

Hermes is a JavaScript engine commonly used with React Native. It executes JavaScript application code and is optimized for mobile application workloads.

Q10. Does Hermes render the UI?

No. Hermes executes JavaScript. React Native's rendering system, including Fabric in the New Architecture, coordinates UI rendering and native view updates.

Q11. What are render, commit, and mount?

Render prepares the updated React UI representation, commit promotes the completed tree and schedules layout work, and mount applies the necessary changes to the host platform UI.

Q12. What can cause a React Native app to freeze?

Potential causes include expensive synchronous JavaScript work, blocked UI-critical operations, inefficient rendering, heavy native processing, and excessive work during interactions.

Q13. Does enabling the New Architecture guarantee better performance?

No. It enables improved capabilities and can reduce certain overheads, but application performance still depends on the workload, implementation, dependencies, and device.

Q14. Why do native libraries need compatibility checks?

Libraries may rely on specific React Native APIs, native build tools, platform versions, or architecture assumptions. Compatibility checks help prevent build failures and runtime issues.

Q15. When should a developer create a custom native module?

A custom native module may be appropriate when the application requires platform functionality that is not already available through React Native core or a suitable maintained library.

Q16. What is view flattening?

View flattening is an optimization that can remove certain unnecessary layout-only nodes from the native view hierarchy while preserving expected UI behavior.

Q17. How can native architecture errors be debugged?

Reproduce the problem, inspect JavaScript and native logs, verify library compatibility and build settings, isolate the failing feature, and test the fix on the affected platform.

Q18. What is the purpose of the JavaScript thread?

The JavaScript runtime executes application logic, event handlers, and other JavaScript work. Excessive synchronous work can delay interactions and state-driven UI updates.

Q19. Why is platform-specific code sometimes necessary?

Android and iOS expose different native APIs, permissions, UI behavior, and system capabilities. Platform-specific code allows applications to accommodate these differences where needed.

Q20. What should developers consider before adopting a native library?

They should review maintenance status, React Native version compatibility, New Architecture support, platform requirements, permissions, build instructions, and testing coverage.

26. Quick Revision Checklist

• Understand the purpose of React Native architecture.
• Know the responsibilities of JavaScript and native platform code.
• Understand the legacy bridge and its limitations.
• Know what JSI does.
• Understand Fabric and the render pipeline.
• Know the difference between TurboModules and native components.
• Understand how Codegen supports native interfaces.
• Know the role of Hermes as a JavaScript engine.
• Understand render, commit, and mount phases.
• Recognize JavaScript-thread and UI-thread performance problems.
• Know when platform-specific implementations are necessary.
• Check library compatibility before integrating native dependencies.
• Understand the basics of native build debugging.
• Profile performance instead of assuming the architecture is the cause.

27. Official Learning Resources

• React Native Architecture Overview — an introduction to React Native internals.
• About the New Architecture — the goals and major technologies of the New Architecture.
• Fabric Renderer — concepts behind the modern rendering system.
• Render, Commit, and Mount — an overview of the rendering process.
• The New Architecture Is Here — an explanation of the New Architecture and its availability by default in React Native 0.76.

28. Conclusion

Understanding React Native native architecture fundamentals helps developers see how JavaScript application logic, React components, the rendering system, and native platform capabilities work together. This knowledge is valuable when developing complex interfaces, integrating native libraries, diagnosing performance issues, and troubleshooting Android or iOS build failures.

The New Architecture introduces JSI, Fabric, TurboModules, and Codegen to improve native integration and support modern rendering capabilities. Each technology has a distinct role: JSI provides a foundation for JavaScript-to-C++ interaction, Fabric coordinates UI rendering, TurboModules expose native functionality, and Codegen generates supported native interfaces from typed specifications.

Developers do not need to implement every architecture component themselves to build effective React Native applications. However, understanding these fundamentals makes it easier to choose suitable libraries, reason about application behavior, and solve problems as projects grow.

Explore the course: React Native Training at JustAcademy

Register for a course demo: Book a Course Demo

Visit JustAcademy: JustAcademy Official Website